<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
      </image>
      <text class="title">维度健康医生端注册</text>
    </view>
    <view class="login-form-content">
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="registerForm.email" class="input" type="text" placeholder="请输入邮箱" maxlength="30" />
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="registerForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
      </view>
	  <view class="input-item flex align-center">
	    <view class="iconfont icon-password icon"></view>
	    <input v-model="registerForm.confirmPassword" type="password" class="input" placeholder="请输入重复密码" maxlength="20" />
	  </view>
	  <view class="input-item flex align-center">
	    <view class="iconfont icon-user icon"></view>
	    <input v-model="registerForm.doctorName" class="input" type="text" placeholder="请输入昵称" maxlength="30" />
	  </view>
	  <view class="input-item flex align-center">
      <template>
        <el-select v-model="registerForm.positionId" placeholder="请输入职位">
          <el-option
              v-for="item in position"
              :key="item.id"
              :label="item.positionName"
              :value="item.id">
          </el-option>
        </el-select>
      </template>
	  </view>
	  <view class="input-item flex align-center">
      <template>
        <el-select v-model="registerForm.hospitalId" placeholder="请输入职位">
          <el-option
              v-for="item in hospital"
              :key="item.id"
              :label="item.hospitalName"
              :value="item.id">
          </el-option>
        </el-select>
      </template>
	  </view>
	  <view class="input-item flex align-center">
	    <view class="iconfont icon-user icon"></view>
	    <input v-model="registerForm.personalIntroduction" class="input" type="text" placeholder="个人简介" maxlength="30" />
	  </view>
      <view class="input-item flex align-center">
	    <view class="iconfont icon-user icon"></view>
	    <input v-model="registerForm.consultationFee" class="input" type="text" placeholder="咨询费用" maxlength="30" />
	  </view>
	  <view class="input-item flex align-center">
	    <view class="iconfont icon-user icon"></view>
	    <input v-model="registerForm.expertise" class="input" type="text" placeholder="擅长领域" maxlength="30" />
	  </view>
	  <view class="input-item flex align-center">
	    <view class="iconfont icon-user icon"></view>
	    <input v-model="registerForm.realName" class="input" type="text" placeholder="真实姓名" maxlength="30" />
	  </view>
      <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
        <view class="iconfont icon-code icon"></view>
        <input v-model="registerForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
      </view>
	  <view class="action-btn">
	      <button :disabled="isDisabled"  @click="getCode" class="register-btn cu-btn block bg-blue lg round">
	          {{ buttonText }}
	      </button>
	  </view>
      <view class="action-btn">
        <button @click="handleRegister()" class="register-btn cu-btn block bg-blue lg round">注册</button>
      </view>
    </view>
    <view class="xieyi text-center">
      <text @click="handleUserLogin" class="text-blue">使用已有账号登录</text>
    </view>
  </view>
</template>

<script>
  import {getCode, register } from '@/api/login'
  import {getPosition} from "../api/position";
  import {getHospital} from "../api/hospital";
  // 按需引入所需组件
  import { Select, Option } from 'element-ui';
  export default {
	components: {
	  // 确保在这里注册了 el-select 和 el-option 组件
	  'el-select': Select,
	  'el-option': Option
	      },
    data() {
      return {
		isDisabled: false, // 初始化为可点击状态，即按钮未禁用
		buttonText: '获取验证码',
		countdown: 60, // 倒计时秒数
		timer: null, // 用于存储定时器的标识
        codeUrl: "",
        captchaEnabled: true,
        globalConfig: getApp().globalData.config,
        registerForm: {
          positionId:"",
          hospitalId:"",
          doctorName:"",
          email: "",
          consultationFee:"",
          personalIntroduction:"",
          expertise:"",
          realName:"",
          password: "",
          confirmPassword: "",
          code: "",
          uuid: '',
		      mino: 1 ,
        },
        //医院信息
        hospital:[{
          id:0,
          hospitalName:'',
        }],
        //医生职位
        position:[{
          id:0,
          positionName:'',
        }],
      }
    },
    created() {
      this.getPositionData()
      this.getHospitalData()
    },
    methods: {
      //医生职位
      getPositionData(){
        getPosition().then(res=>{
          this.position=res.data;
        })
      },
      //医院信息
      getHospitalData(){
        getHospital().then(res=>{
          this.hospital=res.data;
        })
      },
	           getCode() {
	               // 这里假设你的获取验证码的原有逻辑代码放在这里，比如发送请求等
	               console.log('执行获取验证码的实际逻辑');
	               // 点击后禁用按钮，开始倒计时
				   getCode(this.registerForm).then(res=>{
					   alert("发送成功!")
					   this.isDisabled = true;
					   this.startCountdown();
				   })

	           },
	           startCountdown() {
	               let that = this;
	               this.timer = setInterval(() => {
	                   that.countdown--;
	                   that.buttonText = that.countdown + '秒后重发';
	                   if (that.countdown === 0) {
	                       // 倒计时结束，恢复按钮可点击状态，并重置文本和倒计时
	                       clearInterval(that.timer);
	                       that.isDisabled = false;
	                       that.buttonText = '获取验证码';
	                       that.countdown = 60;
	                   }
	               }, 1000);
	           },
	       beforeDestroy() {
	           // 在组件销毁前清除定时器，避免内存泄漏等问题
	           if (this.timer) {
	               clearInterval(this.timer);
	           }
	       },

      // 用户登录
      handleUserLogin() {
        this.$tab.navigateTo(`/pages/login`)
      },
      // 注册方法
      async handleRegister() {
        if (this.registerForm.email === "") {
          this.$modal.msgError("请输入您的邮箱")
        } else if (this.registerForm.password === "") {
          this.$modal.msgError("请输入您的密码")
        } else if (this.registerForm.confirmPassword === "") {
          this.$modal.msgError("请再次输入您的密码")
        } else if (this.registerForm.password !== this.registerForm.confirmPassword) {
          this.$modal.msgError("两次输入的密码不一致")
        } else if (this.registerForm.code === "" && this.captchaEnabled) {
          this.$modal.msgError("请输入验证码")
        } else if (this.registerForm.doctorName === "" && this.captchaEnabled) {
          this.$modal.msgError("请输入昵称")
        } else if (this.registerForm.positionId === "" && this.captchaEnabled) {
          this.$modal.msgError("请选择职位")
        } else if (this.registerForm.hospitalId === "" && this.captchaEnabled) {
          this.$modal.msgError("请选择医院")
        }else if (this.registerForm.consultationFee === "" && this.captchaEnabled) {
          this.$modal.msgError("请数据您的咨询费用")
        }else if (this.registerForm.personalIntroduction === "" && this.captchaEnabled) {
          this.$modal.msgError("请输入个人简介")
        }else if (this.registerForm.expertise === "" && this.captchaEnabled) {
          this.$modal.msgError("请输入您的擅长领域")
        }else if (this.registerForm.realName === "" && this.captchaEnabled) {
          this.$modal.msgError("请输入您的真实姓名")
        }else {
          this.$modal.loading("注册中，请耐心等待...")
          this.register()
        }
      },
      // 用户注册
      async register() {
        register(this.registerForm).then(res => {
          this.$modal.closeLoading()
          uni.showModal({
          	title: "系统提示",
          	content: "恭喜你，您的账号 " + this.registerForm.email + " 注册成功！",
          	success: function (res) {
          		if (res.confirm) {
                uni.redirectTo({ url: `/pages/login` });
          		}
          	}
          })
        })
      },
      // 注册成功后，处理函数
      registerSuccess(result) {
        // 设置用户信息
        this.$store.dispatch('GetInfo').then(res => {
          this.$tab.reLaunch('/pages/index')
        })
      }
    }
  }
</script>

<style lang="scss">

page {
    background-color: #ffffff;
}

.normal-login-container {
    width: 100%;

   .logo-content {
        width: 100%;
        font-size: 21px;
        text-align: center;
        padding-top: 15%;

        image {
            border-radius: 4px;
        }

       .title {
            margin-left: 10px;
        }
    }

   .login-form-content {
        text-align: center;
        margin: 20px auto;
        margin-top: 15%;
        width: 80%;

       .input-item {
            margin: 20px auto;
            background-color: #f5f6f7;
            height: 45px;
            border-radius: 20px;

           .icon {
                font-size: 38rpx;
                margin-left: 10px;
                color: #999;
            }

           .input {
                width: 100%;
                font-size: 14px;
                line-height: 20px;
                text-align: left;
                padding-left: 15px;
            }

        }

       .register-btn {
            margin-top: 40px;
            height: 45px;
        }

       .xieyi {
            color: #333;
            margin-top: 20px;
        }

       .login-code {
            height: 38px;
            float: right;

           .login-code-img {
                height: 38px;
                position: absolute;
                margin-left: 10px;
                width: 200rpx;
            }
        }

        // 为 el-select 组件添加样式
       .el-select {
            width: 100%;
            // 调整输入框的高度、行高、字体大小等
           .el-input__inner {
                height: 45px;
                line-height: 45px;
                font-size: 14px;
                border-radius: 20px;
                // 可以添加其他自定义样式，如字体颜色等
                color: #333;
            }
        }

        // 为 el-option 组件添加样式
       .el-select-dropdown {
            border: 1px solid #ddd;
            border-radius: 5px;
           .el-select-dropdown__item {
                height: 30px;
                line-height: 30px;
                font-size: 14px;
                color: #333;
                &:hover {
                    background-color: #f5f6f7;
                    // 鼠标悬停时的字体颜色
                    color: #000;
                }
            }
        }
    }
}

</style>
